<template>
  <!-- <el-menu
    :collapse="collapse"
    default-active="2"
    class="el-menu-vertical-demo"
  >
    <el-menu-item index="1">
      <el-icon-box />
      <span>首页</span>
    </el-menu-item>
  </el-menu>  -->

  <!-- <m-menu :data="data" router :defaultActive="$route.path"></m-menu> -->
  <m-infinite-menu
    :data="data"
    router
    :defaultActive="$route.path"
  ></m-infinite-menu>
</template>

<script setup lang="ts">
// let props = defineProps({
//   collapse: {
//     type: Boolean,
//     default: false,
//     required: true,
//   },
// });
// const emits = defineEmits(["update:collapse"]);

let data = [
  {
    icon: "Box",
    name: "首页",
    index: "/home",
  },
  {
    icon: "Discount",
    name: "图标选择器",
    index: "/icon",
  },
  {
    icon: "Box",
    name: "趋势标记",
    index: "/trend",
  },
  {
    icon: "Brush",
    name: "导航菜单",
    index: "/menu",
  },

  {
    icon: "Aim",
    name: "通知菜单",
    index: "/notify",
  },
  {
    icon: "Van",
    name: "省份选择",
    index: "/province",
  },
  {
    icon: "Place",
    name: "进度条",
    index: "/progress",
  },
  {
    icon: "Finished",
    name: "时间选择",
    index: "/time",
  },
    {
    icon: "Van",
    name: "日期选择",
    index: "/date",
  },
  {
    icon: "Wallet",
    name: "城市选择",
    index: "/city",
  },
    {
    icon: "Wallet",
    name: "日历",
    index: "/calendar",
  },
  {
    icon: "Aim",
    name: "测试...",
    index: "/test",
  },
];
</script>

<style scoped lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
